<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-26
    	描述：文字渲染基础
    	context.font="blod 40px Arial";
    	context.fillTest(String ,x,y);
    	
  
 font定义和用法
		font 属性设置或返回画布上文本内容的当前字体属性。
		font 属性使用的语法与 CSS font 属性相同。
		默认值：	10px sans-serif
		JavaScript 语法：	context.font="italic small-caps bold 12px arial";
	默认值       	font="20px sans-serif";//  大小和字体     最少需要两个参数值
		属性值
值	                             			描述

font-style	
规定字体样式。					可能的值：	oblique（倾斜字体）   normal（默认 无）  	italic（斜体）
												
font-variant		
规定字体变体。  					可能的值：  normal（默认）   small-caps（只有再英文小写才看的出||小型大写子母）
													
font-weight		
规定字体的粗细。				可能的值：    normal（默认）  	bold（粗体）	bolder（更细）  lighter（更粗）   100  200  300 400（normal） 500 600 700（bold） 800 900;
						
font-size / line-height	                      规定字号和行高，以像素计。|| 可能值    20px（default默认）  2em  150%    或文字属性（xx-small x-small medium lager x-lager xx-lager）

font-family/font-family			规定字体系列。  这设置多个字体供浏览器按顺序找  支持@font-face 注入字体    支持web安全字体

caption							使用标题控件的字体（比如按钮、下拉列表等）。
icon							使用用于标记图标的字体。
menu							使用用于菜单中的字体（下拉列表和菜单列表）。
message-box						使用用于对话框中的字体。
small-caption					使用用于标记小型控件的字体。
status-bar						使用用于窗口状态栏中的字体。					
		
		
fillText() 定义和用法
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。						
JavaScript 语法：
context.fillText(text,x,y,maxWidth);	
参数	描述
		text				规定在画布上输出的文本。
		x	 				开始绘制文本的 x 坐标位置（相对于画布）。
		y					开始绘制文本的 y 坐标位置（相对于画布）。
		maxWidth			可选。允许的最大文本宽度，以像素计。
		
		
strokeText()定义和用法
strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。
提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法：
context.strokeText(text,x,y,maxWidth);
参数	描述
	text		规定在画布上输出的文本。
	x			开始绘制文本的 x 坐标位置（相对于画布）。
	y			开始绘制文本的 y 坐标位置（相对于画布）。
	maxWidth	可选。允许的最大文本宽度，以像素计。
    -->
	<body>
		<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =800;
			 var ctx = canvas.getContext("2d");//2d环境
			 ctx.font=" bold 40px Arial";//字体样式
			 
			 ctx.fillStyle="blue";
             ctx.fillText("Hello World我可以任意长度不信你看",50,50);
             
             ctx.lineWidth=2;
             ctx.strokeStyle="coral";
             ctx.strokeText("strokeText我也可以任意长度不信你看",50,100);
             
             	 ctx.fillStyle="blue";
             ctx.fillText("Hello World我只有200像素的长度",50,200,200);
             
             ctx.lineWidth=2;
             ctx.strokeStyle="coral";
             ctx.strokeText("strokeText我只有300像素的长度",50,300,300);
             
		//颜色渐变的文字
		var linearGrad =ctx.createLinearGradient(0,0,800,0);//渐变方向横向
		linearGrad.addColorStop(0.0,"red");
		linearGrad.addColorStop(0.25,"orange");
		linearGrad.addColorStop(0.5,"yellow");
		linearGrad.addColorStop(0.75,"green");
		linearGrad.addColorStop(1.0,"purple");
		ctx.fillStyle=linearGrad;
		ctx.fillText("这是一个具有渐变色的字体样式！！！",40,400);
		
		//背景图作为字体填充色
		var backgroundImage = new Image();
		backgroundImage.src="../img/200.jpg";
		backgroundImage.onload =function(){
			var pattern =ctx.createPattern(backgroundImage,"repeat");//平铺
			ctx.fillStyle=pattern;
			ctx.font="bold 200px Arial";
			ctx.fillText("一个女孩",5,650);//图案
			ctx.strokeText("一个女孩",5,650);//参数相同||外描边
			
		}
			
		
	</script>
</html>
